<script setup lang="ts">
interface AdvantageDataType {
  classNum: string;
  title: string;
  comment: string;
}

const advantageBoxs: AdvantageDataType[] = [
  {
    classNum: '1',
    title: '资源覆盖广，东南亚\欧美带宽节点多',
    comment:
      '66+自建POP点分布于东南亚、日韩、欧美等各大主要数据中心，其中包括香港Mega-I、日本TY2、泰国TCCT、菲律宾RCBC、美国LA1、SV1……其中，东南亚、欧美、全球的带宽节点尤为丰富。',
  },
  {
    classNum: '2',
    title: '拥有全球各国各地区的本地IP/本地带宽',
    comment:
      '拥有自有AS号，与各大海外运营商BGP直连，全球各地区本地IP/带宽资源丰富。运营商包括：中国电信、中国联通、中国移动、香港宽频、香港HKIX、PCCWG、新加坡电信、KINX、COLT、NTT等。',
  },
  {
    classNum: '3',
    title: '传输容量：300G+',
    comment:
      '国际传输线路基于丰富的国际海陆缆和业务接入点资源，我们可为全球企业提供安全、稳定的综合信息通信服务，而且带宽价格更可控。',
  },
  {
    classNum: '4',
    title: '带宽容量：800G+',
    comment:
      '海外BGP带宽资源丰富，与多家海外Tier1运营商BGP互联，可扩容性高，出口稳定，网络质量可按客户需求进行优化。',
  },
];
</script>

<template>
  <div class="transfer-advantage">
    <div class="container">
      <div class="gradient-box">
        <div class="titleBox">
          <i class="icon icon-icon_menu_all"></i>
          <h3>全球带宽资源优势</h3>
        </div>
        <div class="contentBox">
          <div class="iconBox">
            <i class="icon icon-gantanhaozhong"></i>
            <i class="icon icon-xinhao"></i>
            <i class="icon icon-dianchi-gaodianliang"></i>
          </div>
          <div class="contentBody">
            <div
              class="contentBody-box"
              v-for="item in advantageBoxs"
              :key="item.title"
            >
              <div class="contentTitle">
                <div class="ellipseBox">
                  <div class="outside">
                    <div :class="`inside_${item.classNum}`"></div>
                  </div>
                </div>
                <h3 class="title">{{ item.title }}</h3>
              </div>

              <p class="comment">{{ item.comment }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.transfer-advantage {
  width: 100%;
  background-color: #f2f6f7;
  display: flex;
  justify-content: center;
  padding-bottom: 200px;
  .container {
    display: flex;
    justify-content: center;
    .gradient-box {
      overflow-x: hidden;
      max-width: 980px;
      width: 100%;
      height: 720px;
      background: linear-gradient(to bottom, #55feac, #4988f2, #bc4bc5);
      border-radius: 30px;
      display: flex;
      padding: 0px 3px 3px 0;

      .titleBox {
        width: 80px;
        min-width: 50px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 35px;
        .icon {
          font-size: 26px;
          color: #f9fafc;
        }
        h3 {
          margin-top: 35px;
          width: 34px;
          font-family: 'SourceHanSansCN-Regular';
          font-weight: normal;
          font-size: 36px;
          letter-spacing: 5px;
          color: #f9fafc;
          writing-mode: vertical-rl;
        }
      }
      .contentBox {
        padding: 50px;
        width: 100%;
        height: 100%;

        background-color: #fff;
        border-radius: 27px;
        padding-top: 35px;
        display: flex;
        flex-direction: column;

        .iconBox {
          align-self: end;
          width: 85px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-right: 10px solid #fff;

          .icon-gantanhaozhong {
            font-size: 22px;
            color: #d4dcf0;
          }
          .icon-xinhao {
            margin-left: 5px;
            color: #393175;
          }
          .icon-dianchi-gaodianliang {
            font-size: 22px;
            color: #393175;
          }
        }
        .contentBody {
          overflow-x: auto;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          width: 100%;
          height: 590px;
          border-right: 10px solid #fff;

          .contentBody-box {
            min-width: 567px;
            .contentTitle {
              display: flex;
              align-items: center;

              .ellipseBox {
                margin-right: 20px;
                .outside {
                  width: 70px;
                  height: 28px;
                  background-color: #f6f6ff;
                  box-shadow: 4px 3px 7px 0px rgba(4, 0, 0, 0.11);
                  border-radius: 18px;
                  display: flex;
                  justify-content: start;
                  align-items: center;
                  padding-left: 6px;
                  .inside_1 {
                    width: 30px;
                    height: 20px;
                    background-image: linear-gradient(
                      90deg,
                      #59dccf 0%,
                      #4af6bf 100%
                    );
                    border-radius: 13px;
                  }
                  .inside_2 {
                    width: 44px;
                    height: 20px;
                    background-image: linear-gradient(
                      90deg,
                      #4985f4 0%,
                      #4eb7d6 100%
                    );
                    border-radius: 13px;
                  }
                  .inside_3 {
                    width: 20px;
                    height: 20px;
                    background-image: linear-gradient(
                      90deg,
                      #905adb 0%,
                      #7363e9 100%
                    );
                    border-radius: 12px;
                  }
                  .inside_4 {
                    width: 36px;
                    height: 20px;
                    background-image: linear-gradient(
                      90deg,
                      #f836a8 0%,
                      #8b5bdb 100%
                    );
                    border-radius: 12px;
                  }
                }
              }
              .title {
                font-family: 'SourceHanSansCN-Bold';
                font-size: 24px;
                letter-spacing: 3px;
                color: #1d4e8c;
              }
            }
            .comment {
              font-family: 'SourceHanSansCN-Normal';
              font-size: 16px;
              line-height: 40px;
              letter-spacing: 0px;
              color: #2d2e2e;
              // margin-bottom: 35px;
            }
          }
        }
      }
    }
  }
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条宽度 */
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background-image: linear-gradient(
    to bottom,
    #7c7c7c,
    #ffffff
  ); /* 设置滚动条颜色 */
  border-radius: 10px; /* 设置滚动条圆角 */
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f2f2f2; /* 设置滚动条轨道颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置滚动条悬停颜色 */
}

@media screen and (max-width: 1200px) {
  .transfer-advantage {
    .container {
      width: 85%;
    }
  }
}
</style>
